<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        font-size: 1rem;
      }
    </style>
  </head>

  <body>
    <audio>
      <source src="1.mp3" type="audio/mpeg" />
    </audio>
    <button id="btn">我自己的播放按钮</button>
    <button id="btn2">暂停</button>
    <button id="btn3">播放进度</button>
    下载音乐：<a href="1.mp3" download="1.mp3">点击下载</a>

    <br />
    <button id="getPro">获取进度</button>
    <!-- 进度条 -->
    <input type="range" id="jindu" value="50" style="width: 300px" />

    <video controls src="../../huluwa.mp4">
      <track default kind="captions" srclang="en" src="../四段/huluwa.vtt" />
      抱歉，您的浏览器不支持嵌入视频！
    </video>
  </body>
  <script>
    var audio = document.querySelector('audio')
    var btn = document.querySelector('#btn')
    btn.onclick = function () {
      audio.play()
    }
    var btn2 = document.querySelector('#btn2')
    btn2.onclick = function () {
      audio.pause()
    }
    var btn3 = document.querySelector('#btn3')
    btn3.onclick = function () {
      var currentTime = audio.currentTime
      console.log(audio)
    }
    var getPro = document.querySelector('#getPro')
    getPro.onclick = function () {
      var currentTime = audio.currentTime
      var totalTime = audio.duration
      console.log(currentTime, totalTime)
      // console.log((currentTime / totalTime) * 100)
    }
    window.onload = function () {
      setInterval(() => {
        var currentTime = audio.currentTime
        var totalTime = audio.duration
        var jindu = document.querySelector('#jindu')
        jindu.value = (currentTime / totalTime) * 100
      }, 100)
    }
    const debounce = function (func, wait, immediate) {
      //函数防抖[func 函数,wait 延迟执行毫秒数,immediate true 表立即执行,false 表非立即执行,立即执行是触发事件后函数会立即执行，然后n秒内不触发事件才能继续执行函数的效果]
      let timeout
      return function () {
        let context = this
        let args = arguments
        if (timeout) clearTimeout(timeout)
        if (immediate) {
          var callNow = !timeout
          timeout = setTimeout(() => {
            timeout = null
          }, wait)
          if (callNow) func.apply(context, args)
        } else {
          timeout = setTimeout(function () {
            func.apply(context, args)
          }, wait)
        }
      }
    }
  </script>
</html>
